<script setup lang="ts">

import users from "@/pages/user/data/users.json";
import {columns, filters} from "@/pages/user/data/columns";
import DataTable from "@/pages/components/DataTable.vue";
import UsersActionCreate from "@/pages/user/components/UsersActionCreate.vue";
import UsersActionInvite from "@/pages/user/components/UsersActionInvite.vue";

const queryColumn = 'username'

</script>

<template>
  <div class="w-full flex flex-col items-stretch gap-4">
    <div class="flex flex-wrap items-end justify-between gap-2">
      <div>
        <h2 class="text-2xl font-bold tracking-tight">
          Users
        </h2>
        <p class="text-muted-foreground">
          Here&apos;s a list of your users!
        </p>
      </div>
      <div class='flex gap-2'>
        <UsersActionInvite/>
        <UsersActionCreate/>
      </div>
    </div>
    <DataTable
        :data="users.data"
        :columns="columns"
        :filters="filters"
        :query-column-id="queryColumn"
    ></DataTable>
  </div>
</template>

<style scoped>

</style>
